<script setup>
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
let checkNum = route.query.checkNum
const router = useRouter()
const checkList = ref([])

const checkBack = () => {
  if (checkNum !== undefined && checkNum !== null) {
    checkList.value = checkNum.toString().split('');
    while (checkList.value.length < 4) {
      checkList.value.unshift('0');
    }
  } else {
    console.error('checkNum is undefined or null');
  }
};

// 个人信息
const userInfo = ref()
const toAddAdmin = () => {
  router.push({
    path: '/addAdmin'
  })
}
const toBanUser = () => {
  router.push({
    path: '/banUser'
  })
}
const toReviewComments = () => {
  router.push({
    path: '/reviewComments'
  })
}
const toReviewWeibo = () => {
  router.push({
    path: '/reviewWeibo'
  })
}
onMounted(() => {
  checkBack()
})
</script>
<template>
  <div class="navbar">
    <input type="checkbox" id="checkbox" />
    <label for="checkbox">
      <i class="fa fa-bars" aria-hidden="true"></i>
    </label>
    <ul>
      <li style="border-bottom: 3px solid #101010; margin: 0">
        <span color="#cfcfcf">欢迎您!管理员XXX</span>
      </li>
      <li
        style="border-bottom: 3px solid #101010; margin: 0"
        v-if="checkList[3] === '1'"
      >
        <a href="javascript:void(0)" @click="toAddAdmin()">
          <i class="fa fa-home" aria-hidden="true"></i>
          <span>新增管理员</span>
        </a>
      </li>
      <li
        style="border-bottom: 3px solid #101010; margin: 0"
        v-if="checkList[2] === '1'"
      >
        <a href="javascript:void(0)" @click="toBanUser()">
          <i class="fa fa-sitemap" aria-hidden="true"></i>
          <span>封禁用户</span>
        </a>
      </li>
      <li
        style="border-bottom: 3px solid #101010; margin: 0"
        v-if="checkList[1] === '1'"
      >
        <a href="javascript:void(0)" @click="toReviewWeibo()">
          <i class="fa fa-user-circle-o" aria-hidden="true"></i>
          <span>审核微博</span>
        </a>
      </li>
      <li
        style="border-bottom: 3px solid #101010; margin: 0"
        v-if="checkList[0] === '1'"
      >
        <a href="javascript:void(0)" @click="toReviewComments()">
          <i class="fa fa-user-circle-o" aria-hidden="true"></i>
          <span>审核评论</span>
        </a>
      </li>
    </ul>
    <div class="main"><router-view></router-view></div>
  </div>
</template>
<style lang="scss" scoped>
* {
  /* 初始化 取消内外边距 */
  margin: 0;
  padding: 0;
}
body {
  /* 溢出隐藏 */
  overflow: hidden;
}
.navbar {
  /* 相对定位 */
  position: fixed;
  /* 100%窗口宽度 */
  width: 100vw;
  display: flex;
  background-color: #111;
}
.main {
  flex: 1;
  height: calc(100vh - 43px);
  position: relative;
  top: 43px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#checkbox {
  display: none;
}
.navbar label {
  position: absolute;
  top: 0;
  left: 70px;
  width: 100%;
  height: 67px;
  font-size: 30px;
  color: #5a738e;
  background-color: #242424;
  padding-left: 20px;
  border: 3px solid #101010;
  cursor: pointer;
  /* 加个动画过渡 */
  transition: all 0.5s;
}
.navbar ul {
  list-style: none;
  width: 70px;
  /* 100%窗口高度 */
  height: 100vh;
  background-color: #242424;
  transition: all 0.5s;
  overflow: hidden;
}
.navbar ul li {
  height: 70px;
  margin-bottom: 10px;
}
.navbar ul li:first-child {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
}
.navbar ul li:first-child img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.navbar ul li:first-child span {
  /* 先把文字隐藏起来 */
  display: none;
  color: #fff;
  /* 文字禁止换行 */
  white-space: nowrap;
  padding-left: 10px;
}
.navbar ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 垂直排列 */
  flex-direction: column;
  width: 100%;
  height: 100%;
  color: #d1d1d1;
  text-decoration: none;
}
.navbar ul li a i {
  font-size: 25px;
  margin-bottom: 10px;
}
.navbar ul li a span {
  font-size: 12px;
  white-space: nowrap;
}
.navbar ul li a:hover {
  color: #fff;
  background-color: #404040;
}
/* :checked选择器是判断复选框是否被选中 */
/* +是相邻兄弟选择器，找到input的下一个兄弟label */
.navbar input:checked + label {
  left: 200px;
}
/* ~也是兄弟选择器，但它可以找到隔了几代的兄弟 */
.navbar input:checked ~ ul {
  width: 200px;
}
.navbar input:checked ~ ul li:first-child {
  /* 将居中改为开头对齐 */
  justify-content: flex-start;
}
.navbar input:checked ~ ul li:first-child span {
  /* 文字显示 */
  display: block;
}
.navbar input:checked ~ ul li a {
  flex-direction: row;
  justify-content: flex-start;
}
.navbar input:checked ~ ul li a i {
  font-size: 18px;
  margin: 0 15px 0 30px;
}
.navbar input:checked ~ ul li a span {
  font-size: 14px;
}
</style>
